<template>
	<view class="content">
		<div class="pos-rel" v-if="loading">

			<!-- 内容 -->
			<div class="main mt-20">
				<div class="mb-20" v-if="page === 'expect'">
					<div class="font-bold">已选择({{ selectList.length }}/3)</div>
					<div class="flex-center ">
						<div class="flex-center mr-12 slectItem mt-10" v-for="(item, index) in selectList" :key="index">
							<div>{{ item.text }}</div>
							<div class="iconfont icon-close1"></div>
						</div>
					</div>
				</div>
				<div class="contentBox">
					<div v-for="(type, i) in industryList" :key="i" class="mb-60">
						<div class="title mb-12 ">{{ type.text }}</div>
						<div class="flex-box">
							<div v-for="(item, index) in type.industryDtos" :key="index" class="item text-cut1 fontE11"
								:class="item.check ? 'active' : ''" @click="select(item)">
								{{ item.text }}
							</div>
						</div>
					</div>
				</div>
				<div class="bottom flex align-center">
					<div class="ml-auto flex">
						<div class="bottomBtnCancle fontS26" @click="cancleBtn">
							<div>清除</div>
						</div>
						<div class="bottomBtnConfirm fontS26 ml-20" @click="confirmBtn">
							<div>确认</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</view>
</template>

<script>
const App = getApp().globalData;

import {
	findServePersonalDetailApp,
	findIndustryTree
} from "@/api/index";
import {
	tutorList,
} from "@/api/serve";


export default {

	data() {
		return {
			headerHeight: 0, // 用于存储头部高度
			baseUrl: getApp().globalData.baseUrl,
			selectList: [],
			isShowbar: false,
			isBack: false,
			serviceDetail: null,
			loading: true,


			custom: null,
			navTop: null,
			educationList: getApp().globalData.education,
			eduIndex: 0,
			PriceList: getApp().globalData.PriceList,
			priceIndex: 0,

			experienceList: getApp().globalData.experience,
			experienceIndex: 0,

			comPeopleList: getApp().globalData.comPeople,
			comIndex: 0,
			industryList: [],
			typeIndex: 0,
			page: ''

		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},
	onShareTimeline() {
		return {
			title: this.shareLine.title,
			// imageUrl: this.shareLine.imageUrl,
		}
	},


	async onLoad(option) {
		this.page = option.page;
		let custom = wx.getMenuButtonBoundingClientRect()
		this.btnRight = uni.upx2px(30) + custom.width
		this.custom = custom
		this.navTop = custom.top - this.statusBarHeight
		await this.getTypeList()


	},


	methods: {
		// 选择
		async select(item) {
			if (this.page === 'expect') {
				if (this.selectList.length < 3) item.check = !item.check;
				if (item.check) {

					this.selectList.push(item)
				} else {
					this.selectList.map((dItem, dIndex) => {
						if (item.id === dItem.id) {
							this.selectList.splice(dIndex, 1)
						}
					})
				}

			} else {

				this.industryList.map(dItem => {
					dItem.industryDtos.forEach(iItem => {
						iItem.check = false
					})
				});
				item.check = true
				this.item = item
				console.log(item.check)



			}


		},
		// 行业分类
		async getTypeList(id) {

			const {
				data
			} = await findIndustryTree();
			data.forEach(dItem => {
				dItem.industryDtos.forEach(item => {
					item.check = false
				})
			});
			this.industryList = data


		},
		toMore() {
			uni.navigateTo({
				url: `/pages/home/industy`
			})
		},
		confirmBtn() {
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let nowPage = pages[pages.length - 1]; //当前页页面实例
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			if (this.page === 'home') {
				prevPage.$vm.typeList.pop()
				prevPage.$vm.typeList.push(this.item)
				// prevPage.$vm.typeList[prevPage.$vm.typeList.length - 1].text = this.item.text
				// prevPage.$vm.typeList[prevPage.$vm.typeList.length - 1].id = this.item.id
				prevPage.$vm.typeIndex = prevPage.$vm.typeList.length - 1
			} else if (this.page === 'expect') {
				let arrId = []
				let arrName = []
				this.industryList.map(dItem => {
					dItem.industryDtos.forEach(iItem => {
						if (iItem.check) {
							arrId.push(iItem.id)
							arrName.push(iItem.text)
						}
					})
				});

				prevPage.$vm.postForm.industryIds = arrId.join(',')
				console.log(prevPage.$vm.postForm.industryIds, 'prevPage.$vm.postForm.industryIds')
				prevPage.$vm.postForm.industryNames = arrName.join(',')
				console.log(prevPage.$vm.postForm.industryNames)
				// prevPage.$vm.postForm.industryIds = this.industryList.map(dItem => { dItem.check = true })
				// prevPage.$vm.postForm.industryTypeId = this.item.typeId
			} else {

				prevPage.$vm.postForm.industryId = this.item.id
				prevPage.$vm.postForm.industryTypeId = this.item.typeId
				prevPage.$vm.industryName = this.item.text
			}
			uni.navigateBack({
				delta: 1
			})
		}

	},
};
</script>

<style lang="less" scoped>
page {
	background-color: #f7f7f7 !important;
}

.content {
	height: 100vh;
	overflow-y: auto;
	// background: #fff;

	padding-bottom: calc(constant(safe-area-inset-bottom) + 108upx);
	/*兼容 IOS<11.2*/
	padding-bottom: calc(env(safe-area-inset-bottom) + 108upx);
	/*兼容 IOS>11.2*/

}

.main {
	padding: 30upx;
}

.contentBox {

	// padding: 20rpx;
	.flex-box {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 16upx 26upx;
		/*  声明行的高度  */
		grid-template-rows: 72upx;

		line-height: 72upx;

		.item {
			text-align: center;
			// padding: 0 10upx;
			background: #F2F2F2;
			border-radius: 4px;
			border: 1px solid #F2F2F2;
			font-size: 24upx;
			color: #333333;
			transition: all .5s;

			&.active {
				background: #E9F8F0;
				border-radius: 4px;
				border: 1px solid #34AC6E;
				color: #37AF71;
				transition: all .5s;
			}
		}

	}
}

.title {
	font-weight: 500;
	font-size: 30upx;
	color: #111111;
	line-height: 48upx;

}

.slectItem {
	padding: 6px 8px;
	background: #E9F8F0;
	color: #37AF71;
}
</style>